<template>
  <Viewer :value="value" :plugins="plugins" />
</template>

<script setup lang="ts">
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import math from '@bytemd/plugin-math'
import { Viewer } from "@bytemd/vue-next"
import { withDefaults, defineProps } from 'vue'
import 'bytemd/dist/index.css'
import 'highlight.js/styles/github.css'
import 'katex/dist/katex.css'
import '@/assets/styles/md_editor.css'
const plugins = [
  gfm(),
  highlight(),
  math(),
  // Add more plugins here
]

interface Props {
  value: string
}
withDefaults(defineProps<Props>(), {
  value: '',
})

</script>

